<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useMainSearch} from "../hooks/useMainSearch.ts";
import {Plus} from "@element-plus/icons-vue";
import MemberCenterHeaderView from "./MemberCenterHeaderView.vue";
import HistoryHeaderView from "./HistoryHeaderView.vue";
import CreativeReleaseView from "./CreativeReleaseView.vue";
import UserHeaderInfomationView from "./UserHeaderInfomationView.vue";
import LoginView from "../view/login/LoginView.vue";
import {useMainLogin} from "../hooks/useMainLogin.ts";
import {mainStore} from "../store/store.ts";
import {useRouter} from "vue-router";
import {useLogin} from "../hooks/useLogin";

// document.body.style.setProperty('--el-fill-color-light', '#FC5532');
const circleUrl = ref('/assets/headerBase.jpg')
const memberBoxUrl = ref('/assets/memberbox.gif')
const userHeaderInfo = ref()
const {inputSearch, searchHandle} = useMainSearch();
const {showInfomation, dialogVisible, handleClose, pdLogin, exit} = useMainLogin();
const router = useRouter()
const store = mainStore()
const {getter_loginStatus, setter_loginStatus} = store
const login = () => {
  dialogVisible.value = false
  showInfomation.value = getter_loginStatus()
  // userHeaderInfo.value.userName = pinia.userName
  // userHeaderInfo.value.changeUserName("xioa123")
}
const {AutoLogin} = useLogin()
onMounted(async () => {
  let res = await AutoLogin()
  if (res.result) {
    setter_loginStatus(res.result);
    showInfomation.value = res.result
  }
})
const routeTo = (page: number) => {
  router.push({path: '/message', query: {page: page}})
}
</script>

<template>
  <div class="header-box">
    <div class="header-left">
      <el-text class="header-marin-2">XIOA-AO</el-text>
      <el-button class="header-marin-2 header-btn-width" link>博客</el-button>
      <el-button class="header-btn-width" link>下载</el-button>
      <el-button class="header-btn-width" link>学习</el-button>
      <el-button class="header-btn-width" link>社区</el-button>
      <el-button class="header-btn-width" link>知道</el-button>
      <el-button class="header-btn-width" link>GitCode</el-button>
      <el-button class="header-btn-width" link>InsCode</el-button>
    </div>
    <div class="header-center">
      <el-input
          v-model="inputSearch"
          @keydown.enter="searchHandle"
          placeholder="🔥 Please input"
          class="input-with-select header-search"
      >
        <template #append>
          <el-button @click="searchHandle" class="header-btn-search el-btn-search">搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="header-right">
      <div class="header-btn-gl">
        <el-dropdown>
          <el-avatar @click="pdLogin" class="el-dropdown-link header-marin-10" :size="45"
                     :src="circleUrl"/>
          <template #dropdown>
            <div class="drop-menu-box" v-if="showInfomation">
              <UserHeaderInfomationView ref="userHeaderInfo" @removeLogin="exit"/>
            </div>
          </template>
        </el-dropdown>
      </div>

      <el-dropdown>
        <el-button class="el-dropdown-link header-btn-width header-marin-2 header-btn-drop" link>会员中心
          <el-image :src="memberBoxUrl" class="member-box-size"/>
        </el-button>
        <template #dropdown>
          <div class="drop-menu-box">
            <MemberCenterHeaderView/>
          </div>
        </template>
      </el-dropdown>

      <el-dropdown>
        <el-button @click="routeTo(0)"
                   class="el-dropdown-link header-btn-width header-btn-margin-message" link>消息
        </el-button>
        <template #dropdown>
          <el-dropdown-menu class="drop-menu-box">
            <el-dropdown-item @click="routeTo(0)" class="dropdown-item-height">评论和@</el-dropdown-item>
            <el-dropdown-item @click="routeTo(1)" class="dropdown-item-height">新增粉丝</el-dropdown-item>
            <el-dropdown-item @click="routeTo(2)" class="dropdown-item-height">赞和收藏</el-dropdown-item>
            <el-dropdown-item @click="routeTo(3)" class="dropdown-item-height">私信</el-dropdown-item>
            <el-dropdown-item @click="routeTo(4)" class="dropdown-item-height">系统通知</el-dropdown-item>
            <el-dropdown-item @click="router.push('Setting')" class="dropdown-item-height">消息设置</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dropdown>
        <el-button class="el-dropdown-link header-btn-width header-marin-2" link>历史</el-button>
        <template #dropdown>
          <el-dropdown-menu class="drop-menu-box">
            <HistoryHeaderView/>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button class=" header-btn-width header-marin-2" link>创作中心</el-button>
      <div class="header-btn-gl header-marin-2">
        <el-dropdown class="dropdown-border">
          <el-button class="el-dropdown-link header-btn-size" color="#FC5532" size="default" round :icon="Plus">
            创作发布
          </el-button>
          <template #dropdown>
            <el-dropdown-menu class="drop-menu-box">
              <CreativeReleaseView/>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>
  </div>

  <el-dialog
      v-model="dialogVisible"
      width="500" class="info-dialog"
      :before-close="handleClose"
  >
    <login-view @login="login"></login-view>
    <template #footer>
      <div class="dialog-footer">
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
@import "style/MainHeader";

.c {
  background-color: transparent;
}

:deep(.el-input-group__append) {
  background-color: #FC5532;
}
</style>
